<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/include/header.jsp" %>
</head>
<body style="background-color: white;">
		<div class="main" style="padding: 10px;">
  		<div class="b_box">
        <div class="p_bar"></div>
	         <div class="ch_panel">
				<form id="sysUserForm" action="post">
				    <input type="hidden" name="deptId" id="deptId" value="${sysDept.deptId}" />
					<table class="c_table">
					<tr>
						<td width="15%" class="t_r">	用户名(账号):</td>
						<td><input type="text" name="username" id="username" value=""  class="input_txt"/></td>
						<td class="t_r" ><input type="button" value="查询" id="searchBtn"  class="c_btn"/></td>
					</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="action_box m_t10 ch_panel" style="background-color: #F5F7F8">
			<span class="action_tit">用户信息：${sysDept.deptCnName}[${sysDept.deptEnName}]</span>
		</div>
		<table id="tbwrap" class="table_list ch_panel"></table>
		<div class="page eui-pager-custom" id="j_pager"></div>
	</div>
	<script type="text/html" id="tb_template">
	    <thead>
			<tr>
				<th width="25%">用户名</th>
				<th width="25%">用户中文名称</th>
				<th width="40%">备注</th>
				<th width="10%">状态</th>
			</tr>
		</thead>
		<tbody data-type="body" id="queryTable">
    		<!if(list.length>0) { !>
        		<!for(var i=0,len=list.length;i<len;i++){
            		var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
          		!>
		    	<tr class="gradeA <!=classItem!>">
			    	<td><!=item["username"]!></td>
			    	<td><!=item["userCnName"]!></td>
					<td><!=item["remark"]!></td>
					<td><!=item["statusName"]!></td>
		   		</tr>
        	<!}!>
    		<!}else{!>
				<tr>
		    		<td colspan="12"> 暂无数据</td>
				</tr>
    		<!}!>
 		</tbody>
	</script>
	<script type="text/javascript">
		var sysDeptDialog;
		$(function(){
			// 5、查询
			$("#searchBtn").click(function () {
				search();
	        });
		});
	
	</script>
	
	<script type="text/javascript">
		$(function () {
	        search();
	    });
		
		function search() {
	        seajs.use(["component/table"], function (uiTable) {
		        $.post("${ctx}/sysUser/ajaxPageByDeptId",
		        {
		        	page: 1,
		        	deptId:$("#deptId").val(),
		        	username:$("#username").val(),
		        	
		        }, function (result) {
	            	var table = new uiTable({
	                	"con": "#tbwrap",
	                    "data": {
	                         "list": result.dataList
	                    },
	                    "template": "tb_template",
	                    "pager": {
	                    	"con": "#j_pager",
	                        "data": {
	                        	"currentPage": result.currentPage,
	                            "pageCount": result.pageCount,
	                            "rowCount": result.rowCount
	                        },
	                        template: '<a title="首页" class="page_first" data-role="first" href="#"></a><a title="上一页" class="page_prev" href="#" data-role="prev"></a><div data-value="pageNum"></div><a title="下一页" class="page_next" href="#" data-role="next"></a><a title="尾页" class="page_last" href="#" data-role="last"></a> 共<span data-target="rowCount"></span>条 跳转到 <input type="text" data-target="input" class="page_input"/><a href="#" data-role="go" class="go">GO</a>'
	                    }
	                });
	                table.getPager().bind("changePage", function (event, page, hander) {
	                	$.post("${ctx}/sysUser/ajaxPageByDeptId",  {
	    		        	page: page,
	    		        	deptId:$("#deptId").val(),
	    		        	username:$("#username").val(),
	    		        },
	                    function (result) {
	                    	table.render({ "list": result.dataList });
		                    hander({"currentPage": result.currentPage, "pageCount": result.pageCount, "rowCount": result.rowCount });
		                    if(result.dataList.length>0){	fullRows("queryTable");}
	    		        }, "json");
	                });
	                if(result.dataList.length>0){	fullRows("queryTable");}
	        	}, "json");
	      	});
		}
		
		//补齐表格
		function fullRows(id){
/*             var len=$("#"+id).find("tr").length;
            for(var i=10;i>len;i--){ 
            	$("<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td></tr>").appendTo($("#"+id));  
            }
 */		}
	</script>
</body>
</html>